<template>
  <card :width="1120" title="学习记录">
    <div slot="title" class="tabs flex">
      <div
        @click="tabClick(item.index)"
        v-for="(item, index) in tab"
        :key="index"
        :class="['tab', tabIndex == item.index ? 'tabActive' : '', 'shou']"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="search">
      <el-select
        size="small"
        class="search_item"
        v-model="form.semesterId"
        clearable
        placeholder="请选择学期"
      >
        <el-option label="全部" value=""></el-option>
        <el-option
          v-for="item in semesterList"
          :key="item.semesterId"
          :label="item.semesterName"
          :value="item.semesterId"
        >
        </el-option>
      </el-select>

      <!--      <el-select size="small" class="search_item" v-model="form.courseType" clearable placeholder="请选择课程类型">-->
      <!--        <el-option-->
      <!--          v-for="item in dict.type.sys_course_type"-->
      <!--          :key="item.value"-->
      <!--          :label="item.label"-->
      <!--          :value="item.value"-->
      <!--        >-->
      <!--        </el-option>-->
      <!--      </el-select>-->
    </div>
    <div v-loading="loading">
      <courses
        :isLink="true"
        :list="list"
        type="studyProgress"
        :studyProgress="tabIndex"
        height="calc(100vh - 68px - 18px - 190px)"
      ></courses>
    </div>
  </card>
</template>

<script>
import courses from '@/components/courses'
import { semesterList, getStudyRecord } from '@/api/mine/mine'

export default {
  dicts: ['sys_course_type'],
  components: { courses },
  props: {},
  data() {
    return {
      loading: false,
      tabIndex: 0,
      typeObj: {
        0: 1,
        1: 0,
        2: 2,
        3: 3
      },
      semesterList: [],
      courseList: [],
      form: {
        semesterId: '',
        courseType: ''
      },
      tab: [
        { name: '学习中', index: 0 },
        { name: '已完成', index: 2 },
        { name: '中止', index: 3 }
      ],
      list: []
    }
  },
  watch: {
    form: {
      handler() {
        this.getList(this.typeObj[this.tabIndex])
      },
      deep: true
    }
  },
  methods: {
    /* tab点击 */
    tabClick(index) {
      if (index == this.tabIndex) {
        this.tabIndex = index
      } else {
        this.tabIndex = index
        this.getList(this.typeObj[this.tabIndex])
      }
    },
    /* 获取列表 */
    async getList(tabIndex) {
      this.loading = true
      let res = await getStudyRecord({ studyStatus: tabIndex, ...this.form })
      if (res.code == 200) {
        //studyStatus==-2 未报名
        this.list = res.data
        this.loading = false
      } else {
        this.loading = false
      }
    },
    /* 获取学期列表 */
    async getSemesterList() {
      let res = await semesterList()
      this.semesterList = res.data
      this.form.semesterId = this.$store.getters.schoolInfo.semesterId
    }
  },
  created() {
  },
  mounted() {
    this.getList(this.typeObj[this.tabIndex])
    this.getSemesterList()
  }
}
</script>
<style scoped lang="scss">
.tabs {
  margin: auto 10px auto 0;

  .tab:nth-last-of-type(1) {
    border-right: none;
  }

  .tab {
    text-align: center;
    height: 14px;
    border-right: 1px solid #333333;
    width: 90px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 14px;
  }

  .tabActive {
    color: #28b28b;
  }
}

.search {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 20px 20px 10px;
  box-sizing: border-box;
}

.search_item {
  margin-right: 20px;
}
</style>
